<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/qs-6.9.4.min.js"></script>
    <script src="./js/http.js"></script>
    <script>
        //登录
        $(function(){
            $('.form-button').click(()=>{
                let user={
                    username:$('[name=username]').val(),
                    password:$('[name=password]').val()
                };
                login(user,(res)=>{
                    //页面跳转
                    
                    location.href='./index.html';
                    /* location='';
                    location.assign('');
                    location.replace('');//无历史记录 */
                },(err)=>{
                    //提示错误
                    console.log(err);
                    alert(err.message)
                });
            });
            
            $('.change-eye').click(()=>{
                if($('.change-eye').hasClass('fa-eye-slash')){
                    $('.change-eye').removeClass('fa-eye-slash')
                    $('.change-eye').addClass('fa-eye')
                    $('[name=password]').attr('type','text')
                    //prop()
                }else{
                    $('.change-eye').removeClass('fa-eye')
                    $('.change-eye').addClass('fa-eye-slash')
                    $('[name=password]').attr('type','password')
                }
            })
        })
            
    </script>
</head>

<body>
    <header>
        <h3>资讯管理系统</h3>
    </header>
    <article>
        <!-- 左侧 -->
        <div class="image">
            <img src="./images/login-background.png" alt="">
        </div>
        <!-- 右侧 -->
        <div class="form">
            <header>用户名密码登录</header>
            <!-- 用户名 -->
            <div class="form-item">
                <i class="fa fa-user-circle-o"></i>
                <input name='username' type="text" placeholder="请输入用户名">
            </div>
            <!-- 密码 -->
            <div class="form-item">
                <i class="fa fa-key"></i>
                <input name='password' type="password" placeholder="请输入密码">
                <i class="change-eye fa fa-eye-slash"></i>
            </div>
            <!-- 登录按钮 -->
            <div class="form-button pointer">
                登录
            </div>
        </div>
    </article>
</body>
</html>